<template>
    <h2 style="text-align: center;">添加房型信息</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>房型名称</th>
                <th>
                    <input type="text" placeholder="请输入房型名称"  v-model="Info.RoomType_Name"/>
                    <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th>房型图片</th>
                <th>
                    <img :src="Info.RoomType_Img"  style="width: 100px;height: 100px;"/>
                    <input type="file" @change="UpLoads" />
                </th>
            </tr>

            <tr>
                <th>房型售价</th>
                <th>
                    <input type="text" placeholder="请输入房型售价"v-model="Info.RoomType_Price" />
                    <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th>房型面积</th>
                <th>
                    <input type="text" placeholder="请输入房型面积"v-model="Info.RoomType_Size" />
                </th>
            </tr>

            <tr>
                <th>可住人数</th>
                <th>
                    <input type="text" placeholder="请输入可住人数" v-model="Info.RoomType_Num"/>
                    <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th>房型介绍</th>
                <th>
                   <textarea cols="20" rows="4" placeholder="请输入房型介绍" v-model="Info.RoomType_Info"></textarea> 
                   <span style="color: red;">*</span>
                </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="添加房型信息" class="btn btn-success"  @click="AddRoomType" style="margin-right: 10px;"/>
                    <a href="/ShowRoomType">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //添加响应式数据
    const Info=ref({
        RoomType_Name: "",
        RoomType_Img: "",
        RoomType_Price: "",
        RoomType_Size: "",
        RoomType_Num: "",
        RoomType_Info: "",
    })

    //上传
    const UpLoads=(img:any)=>{
        var file=img.target.files[0];
        var fd=new FormData();
        fd.append("Files",file);
        axios.post("https://localhost:44386/api/FilesUpLoads/UpLoads",fd)
        .then(res=>{
            Info.value.RoomType_Img=res.data
        })
    }

    //添加
    const AddRoomType=()=>{
        //非空验证
        if(Info.value.RoomType_Name=="")
        {
            alert('房型名称不能为空！');
            return;
        }
        if(Info.value.RoomType_Price=="")
        {
            alert('房型售价不能为空！');
            return;
        }
        if(Info.value.RoomType_Num=="")
        {
            alert('可住人数不能为空！');
            return;
        }
        if(Info.value.RoomType_Info=="")
        {
            alert('房型介绍不能为空！');
            return;
        }
        axios.post("https://localhost:44386/api/RoomType/AddRoomType",Info.value)
        .then(res=>{
            if(res.data>0)
            {
                alert('房型信息添加成功');
                router.push("/ShowRoomType");//跳转到显示页面
            }
            else
            {
                alert('房型信息添加失败');
            }
        })
    }
</script>